<template>
  <div class="cart">
    <nav-bar class="cart-nav">
      <template v-slot:center>
        <div>购物车({{cartLength}})</div>
      </template>
    </nav-bar>
    <cart-list></cart-list>
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue";
import CartList from './childComp/CartList.vue'
import CartBottomBar from './childComp/CartBottomBar.vue'
import {mapGetters} from 'vuex' //***************** */

export default {
   name:'Cart',
   components:{
     NavBar,
     CartList,
     CartBottomBar
   },
   computed:{
    //  cartLength(){
    //    return this.$store.getters.cartLength
    //  }
    ...mapGetters(['cartLength'])
   }
}
</script>

<style scoped>
.cart-nav {
  background-color: var(--color-tint);
  color: #fff;
  width: 100%;
  font-weight: 600;
}
</style>